﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video.js 加载失败切换其它视频源</title>
    <link href="css/video-js.css" rel="stylesheet" />
    <script src="js/video.min.js"></script>
  </head>
  <body>
        <video id="my-video" class="video-js" loop style="object-fit: fill; width: 600px; height: 300px;margin:auto; " autoplay="autoplay"  webkit-playsinline="true" playsinline="true" preload="auto" muted x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true">

        </video>

    <script type="text/javascript">
      const sources = [
        {
          src: 'https://192.168.1.5:4439/hls/test.m3u8',
          type: 'application/x-mpegURL'
        },
        //资源可以是IP+端口访问或者是域名都可以，但是IP+端口微信内无法获取到，有大哥指导指导。还有需要注意的如果是https网站调用http资源调用不了。
        {
          src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8',
          type: 'application/x-mpegURL'
          }
        //网络资源
      ]

      let index = 0 // 当前加载的视频源序号

      var player = videojs('my-video', {
        //width: 500,
        //controls: true,
        //preload: 'auto',
        //autoplay: 'muted', // 实现视频自动播放的关键,自动播放、循环播放都写到video标签里了。
        sources: sources[index]
      })

      videojs.hook('beforeerror', (player, err) => {
        console.log('hook - beforeerror', index, player.src(), err)
        // Video.js 在切换/指定 source 后立即会触发一个 err=null 的错误，这里过滤一下
        if (err !== null) {
          player.src(sources[++index])
        }
        // 清除错误，避免 error 事件在控制台抛出错误
        return null
      })

      player.ready(() => {
      	  // 丢失 source 事件处理
          player.tech().on('retryplaylist', function () {
          console.log('event - retryplaylist')
          player.src(sources[++index])
        })
      })

      // 其它可以观察进度的事件和钩子
      // videojs.hook('error', (player, err) => {
      //   console.log('hook - error')
      //   return err
      // })

      // player.on('error', () => {
      //   console.log('event - error')
      // })
      // player.on('loadeddata', () => {
      //   console.log('event - loadeddata')
      // })
      // player.on('loadedmetadata', () => {
      //   console.log('event - loadedmetadata')
      // })
      // player.on('loadstart', () => {
      //   console.log('event - loadstart')
      // })
    </script>
  </body>
</html>

